<div class="form--container" mat-dialog-content>
  <form novalidate (ngSubmit)="onSubmit()" [formGroup]="formCtrl">
    <lib-form-section
      title="{{ 'tensorboard.newTensorboard' | translate }}"
      text="{{ 'tensorboard.form.newTensorboardText' | translate }}"
    >
    </lib-form-section>

    <!--Name / Namespace-->
    <lib-form-name-namespace-inputs
      [nameControl]="formCtrl.get('name')"
      [namespaceControl]="formCtrl.get('namespace')"
      resourceName="Tensorboard"
      [existingNames]="tensorboardNames"
    >
    </lib-form-name-namespace-inputs>

    <mat-radio-group formControlName="storage">
      <mat-radio-button value="object_store">
        {{ 'tensorboard.form.objectStore' | translate }}
      </mat-radio-button>
      <mat-radio-button value="pvc" class="radio-pvc">
        {{ 'tensorboard.form.pvc' | translate }}
      </mat-radio-button>
    </mat-radio-group>

    <mat-form-field
      appearance="outline"
      class="wide"
      *ngIf="formCtrl.get('storage').value === 'pvc'"
    >
      <mat-label>{{ 'tensorboard.form.pvcName' | translate }}</mat-label>
      <mat-select formControlName="pvcName">
        <mat-option *ngFor="let pvc of pvcNames" [value]="pvc">
          {{ pvc }}
        </mat-option>
      </mat-select>
    </mat-form-field>

    <mat-form-field
      appearance="outline"
      class="wide"
      *ngIf="formCtrl.get('storage').value === 'pvc'"
    >
      <mat-label>{{ 'tensorboard.form.mountPath' | translate }}</mat-label>
      <input
        formControlName="pvcMountPath"
        matInput
        placeholder="{{ 'tensorboard.form.mountPathEx' | translate }}"
        type="url"
      />
    </mat-form-field>

    <mat-form-field
      appearance="outline"
      class="wide"
      *ngIf="formCtrl.get('storage').value === 'object_store'"
    >
      <mat-label>
        {{ 'tensorboard.form.objectStoreLink' | translate }}
      </mat-label>
      <input matInput formControlName="objectStoreLink" type="url" />
    </mat-form-field>

    <button
      mat-raised-button
      color="primary"
      class="form--button-margin"
      type="submit"
      [disabled]="!formCtrl.valid || blockSubmit"
    >
      {{ 'common.createCaps' | translate }}
    </button>

    <button mat-raised-button type="button" (click)="onCancel()">
      {{ 'common.cancelCaps' | translate }}
    </button>
  </form>
</div>
